<template>
  <div>
    <Chart v-if="timeMode.mode === 2  && timeMode.endTime " :cdata="cdata"/>
    <Chart2 v-if=" !timeMode.endTime " :cdata="cdata"/>
  </div>
</template>

<script>
import Chart from './chart.vue'
import Chart2 from './chart2.vue'
import { isNotEmpty } from '@/utils'

export default {
  props: {
    mapType: {},
    timeMode: {},
    apiData: {},
  },
  data() {
    return {
      cdata: {}
    }
  },
  watch: {
    apiData: {
      handler(v) {
        this.$forceUpdate()
        if (!isNotEmpty(v)) return
        if (this.timeMode.mode === 2 && this.timeMode.endTime) {
          this.cdata = this.generateData()
        } else if (!v.endTime) {
          this.cdata = this.getChart2Data()
        }
      },
      immediate: true,
      deep: true
    }
  },
  components: {
    Chart,
    Chart2
  },
  created() {
  },
  mounted() {
  },
  methods: {
    generateData() {
      // 如果 apiData 不存在或为空，则返回空数组
      if (!this.apiData || !this.apiData.length) {
        return {xData: [], seriesData: []}
      }

      // 从第一个区域的 dayRecordList 中提取 x 轴数据（例如报告日期）
      const xData = this.apiData[0].dayRecordList.map(({reportDate}) => reportDate)

      // 对每个区域，生成折线图数据，提取 dayRecordList 中的 curNum 数值
      const seriesData = this.apiData.map(({areaName, dayRecordList}) => ({
        name: areaName + '所',
        type: 'line',
        symbol: 'circle',
        data: dayRecordList.map(({curNum}) => curNum || 0),
        smooth: false, // 是否平滑曲线
        symbolSize: 4
      }))

      return {xData, seriesData}
    },
    getChart2Data() {
      // 如果 apiData 不存在或为空，则返回空数组
      if (!this.apiData || !this.apiData.length) {
        return {categories: [], data: []}
      }
      // 示例用法
      let arr = this.apiData.slice(0, 5)
      const categories = arr.map(item => item.areaName)
      // console.log(categories,'categories')
      const data = [
        arr.map(item => item.curNum),
        arr.map(item => item.tongQiNum),
      ]
      return {categories, data}
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
